<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>老师首页</title>
    <link rel="icon" href="../img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/style.css">
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/jquery-3.7.0.js"></script>
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="header">
        <div style="display: flex; align-items: center; margin-right: auto;">
            <img src="../img/logo2.png" alt="图片加载失败">
            <h2>教务管理系统</h2>
        </div>  
        
        <div class="option">
            <a href="老师首页.html" class="daohang">查看课表</a>
        </div>
        <div class="option">
            <a href="老师成绩查询.html" class="daohang">成绩查询</a>
        </div>
        <div class="option">
            <a href="老师审批申请.html" class="daohang">申请审批</a>
        </div>
        <img src="../img/message.png" alt="图片加载失败" style="padding: 5px;" id="message-img">
    </div>
    <div class="container">
        <div style=" margin-bottom: 50px;">
            <div style="display: flex;">
                <input id="search" class="search-course" type="text" placeholder=" 请输入想选课程">
                <button class="search-button" onclick="search()">搜索</button>
            </div>
        </div>
        <table class="table">
            <thead>
            <tr>
                <th>课程名称</th>
                <th>课程教室</th>
                <th>课程时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="course">
                
                
            </tbody>
        </table>
        <div style="display: flex; justify-content: center;">
            <p id="current_page"></p>
            <p style="margin-right: auto;" id="total_page"></p>

            <button class="btn btn-primary" style="margin-right: 20px;" onclick="prepage()">上一页</button>
            <button class="btn btn-primary" onclick="nextpage()">下一页</button>
        </div>
        <!-- <canvas id="myChart"></canvas> -->
    </div>
    <div class="footer">
        教务管理系统 2023 from 摆烂小组
    </div>
    <!-- 成绩分析 -->
    <div class="modal fade" id="scoreanalysisModal" tabindex="-1" role="img" aria-labelledby="scoreanalysisModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scoreanalysisModalLabel">往年成绩对比</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <canvas id="myChart" style="width: 100%; height: 250px;"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- 调换教室模态框 -->
    <div class="modal fade" id="applyModal" tabindex="-1" role="dialog" aria-labelledby="applyModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="applyModalLabel">调换教室</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <!-- 表单 -->
                    <form id="applyForm">
                        <div class="form-group">
                            <label for="old-classroom">原教室</label>
                            <input type="text" class="form-control" id="old-classroom" name="old-classroom" required>
                        </div>
                        <div class="form-group">
                            <label for="new-classroom">调换教室</label>
                            <input type="text" class="form-control" id="new-classroom" name="new-classroom" required>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 通知信息 -->
    <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="messageModalLabel">通知信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div id="messagelist">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 提示信息 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">提示消息</h5>
            </div>
            <div class="modal-body">
                <b id="message">这是提示信息</b>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
            </div>
        </div>
    </div>
    <script>//显示提示信息
        function showmessage(message){
            $('#message').text(message)
            $('#exampleModal').modal('show');
        }
    </script>
    <script>
        $(function(){
            teachershowcourse();
            // 通知信息
            $("#message-img").click(function(){
                data={
                    receive_identity : "teacher",
                    receive_id : allCookies['teacher_id']
                };
                $.ajax({
                    url: "showmessage",
                    type:"POST",
                    data: data,
                    dataType:"text",
                    success:function(data){//返回值为发送人是谁,消息内容
                        var html="";
                        var arr=data.split(";");
                        for(let i = 0; i < arr.length-1; i+=2){
                            html+=  "<div class='message'>"+
                                        "<b>"+arr[i]+"</b>"+
                                        "<p>"+arr[i+1]+"</p>"+
                                    "</div>"+
                                    "<hr>";
                        }
                        if (arr == ""){
                            html+="<p>暂无消息</p>"
                        }
                        $("#messagelist").html(html);
                        $("#messageModal").modal('show'); 
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        showmessage("获取通知失败");
                        console.log(textStatus + ': ' + errorThrown);
                    }
                }); 
            });
            //调换教室提交
            $("#applyForm").submit(function (event) {
                // 阻止默认的表单提交行为
                event.preventDefault();

                // 获取表单数据
                var data = {
                    old_classroom : $("#old-classroom").val(),
                    new_classroom : $("#new-classroom").val(),
                    teacherid : allCookies['teacher_id'],
                    courseid : courseid
                };
                // 获取其他课程信息的输入框数据

                // 在这里可以通过 AJAX 将数据发送到后端进行插入数据库的操作
                $.ajax({
                    url: "teacherapply",
                    type: "POST",
                    data: data,
                    dataType: "text",
                    success: function (data) {//返回是否修改成功
                        if (data == "true")
                            showmessage("调换教室申请成功")
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        showmessage("调换教室申请失败");
                        console.log(textStatus + ': ' + errorThrown);
                    }
                });

                // 关闭模态框
                $("#applyModal").modal("hide");
            });
        });
        var ctx = document.getElementById('myChart').getContext('2d');
        var arr1 = [70,80,87,78,89];
        var years = [2019, 2020, 2021, 2022 ,2023];
        var myChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: years,
                            datasets: [{
                                label: '平均成绩',
                                data: arr1,
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 2,
                                fill: false
                            }]
                        },
                        options: {
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100
                                }
                            }
                        }
                    });
        var courseid;
        var current_page = 1;//当前页数
        var total_page;//总页数
        var recordsperpage = 5;//每页的记录数
        var allCookies = parseCookies();
        //老师显示课程
        function teachershowcourse(){
            data={
                current_page1 : current_page,
                recordsperpage1 : recordsperpage,
                teacher_id : allCookies['teacher_id']
            };
            if ($("#search").val() != ""){
                data.search=$("#search").val();
            }
            $.ajax({
                url: "teachershowcourse",
                type:"POST",
                data: data,
                dataType:"text",
                success:function(data){//返回值为课程名称，课程教室，课程时间,课程id
                    var html="";
                    var arr=data.split(";");
                    total_page = Math.floor((arr[0]-1)/recordsperpage)+1;
                    console.log(arr);
                    for(var i = 1; i < arr.length-1; i+=4){
                        html+= "<tr>"+
                                    "<td>"+arr[i]+"</td>"+
                                    "<td>"+arr[i+1]+"</td>"+
                                    "<td>"+arr[i+2]+"</td>"+
                                    "<td><button class='btn btn-primary' style='margin-right : 10px' onclick='apply("+arr[i+3]+",this)'>调换教室</button>"+
                                    "<button class='btn btn-primary' onclick='scoreanalysis("+arr[i+3]+")'>成绩分析</button></td>"
                                "</tr>";

                    }
                    $("#course").html(html);
                    var currentPageElement = document.getElementById("current_page");
                    currentPageElement.textContent = current_page;
                    var currentPageElement = document.getElementById("total_page");
                    currentPageElement.textContent = "/"+total_page;  
                },
                error: function(jqXHR, textStatus, errorThrown){
                    showmessage("获取课表失败");
                    console.log(textStatus + ': ' + errorThrown);
                }
            });        
        }
        //上一页
        function prepage(){
            if (current_page > 1){
                current_page -= 1
                teachershowcourse();
            }
        }
        //下一页
        function nextpage(){
            if (current_page+1 <= total_page){
                current_page += 1;
                teachershowcourse();
            }
        }
        
        function search() {
            current_page = 1;
            teachershowcourse();
        }
        function parseCookies() {
            var cookies = {};
            var cookieString = document.cookie;
            var cookieArray = cookieString.split('; ');
            for (var i = 0; i < cookieArray.length; i++) {
                var cookie = cookieArray[i].split('=');
                var name = cookie[0];
                var value = cookie[1];
                cookies[name] = value;
            }

            return cookies;
        }

        function apply(n,button){
            var row = button.closest("tr");
            $("#old-classroom").val(row.cells[1].textContent);
            courseid = n;
            $("#applyModal").modal('show');
        }
    </script>
    <script>
        function scoreanalysis(n){
            // 获取 canvas 元素
            var data = {
                courseid : n
            };
            $.ajax({
                url: "scoreanalysis",
                type: "POST",
                data: data,
                dataType: "text",
                success:function(response){
                    var arr=response.split(";");
                    console.log(arr);
                    myChart.data.datasets[0].data = arr;
                    myChart.update();
                    $("#scoreanalysisModal").modal('show');
                },
                error:function(jqXHR, textStatus, errorThrown){
                    showmessage("成绩分析失败");
                    console.log(textStatus + ': ' + errorThrown);
                }
            });
            // 假设你有每年的平均成绩数据
        }

    </script>
</body>    
</html>